<template>
	<view class="content">
		<view class="wrapperBox">
			<!-- 地图底框 -->
			<view id="wrapper"></view>
		</view>
		<view class="wrapperBox-But" v-show="showList">
			<view class="wrapperBox-item">
				<view @click="actionGEIde(index)" :class="actionGe == index ? 'wrapperBox-ii action' : 'wrapperBox-ii'"
					v-for="(item, index) in aList" :key="item.id">
					<view>
						<image :src="item.img" mode="scaleToFill" />
					</view>
					<view>{{ item.name }}</view>
				</view>
			</view>
			<view class="wrapperBox-item-butop">
				<view class="wrapperBox-item-ite" @click="shadeAdd">
					<image src="https://cdn7.axureshop.com/demo/1996612/images/%E5%BC%80%E9%97%A8/u9943.svg"
						mode="scaleToFill" />
					<view>立即开门</view>
				</view>
				<view class="flflfl"></view>
				<view class="wrapperBox-item-ite" @click="addKai">
					<image src="https://cdn7.axureshop.com/demo/1996612/images/%E5%BC%80%E9%97%A8/u9943.svg"
						mode="scaleToFill" />
					<view>邀请客房开门</view>
				</view>
			</view>
		</view>

		<up-overlay :show="show" @click="show = false">
			<view class="share-Xia">
				<uni-popup-share></uni-popup-share>
			</view>
			<view class="share-top">
				<view class="share-top-title">西门出口闸机</view>
				<view class="hare-top-qrcode"><up-qrcode :size="150" val="聪哥666"></up-qrcode></view>
				<view class="hare-top-qrcode-text">请将二维码放置门禁摄像头前扫描</view>
				<view class="hare-top-qrcode-but">此二维码钥匙有效时长<text>3小时</text></view>
			</view>
		</up-overlay>


		<!-- 遮罩层 -->
		<up-overlay :show="shade">
		</up-overlay>
		<up-toast ref="uToastRef"></up-toast>
		<tabBar :currentPage="2"></tabBar>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue"
let key = ref("YEYBZ-457KI-WV7GM-UL4Q5-ZNUUO-NLFDD")
let mapObj = ref(null);
let actionGe = ref(-1)
let showList = ref(true)
let show = ref(false)
let shade = ref(false)
let uToastRef = ref()
onMounted(() => {
	getMp()
})
let getMp = () => {
	showList.value = false
	let geolocation = new qq.maps.Geolocation(key.value, "mapqq")
	geolocation.getLocation(mapInit, (res) => {
		console.log(res);
	},
		{
			options: { timeout: 1000, failTipFlag: true }
		}
	)
}

// // 初始化加载
let loadScrpit = () => {
	let script = document.createElement('script');
	script.src =
		`https://map.qq.com/api/gljs?v=1.exp&key=${key.value}&libraries=visualization&callback=mapInit`;
	document.body.appendChild(script);
}

let mapInit = (res) => {
	loadScrpit()
	window.mapInit = function () { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(res.lat, res.lng), // 地图初始坐标
			zoom: 14, // 缩放等级
			mapStyleId: 'style1', // 地图样式
			zoomControl: false, // 设置是否启用缩放控件
			draggable: true,
			scrollable: true,
		})
		showList.value = true
		// 创建点聚合实例
		new TMap.MarkerCluster({
			id: 'cluster',
			map: mapObj,
			enableDefaultStyle: true, // 启用默认样式
			minimumClusterSize: 2, // 形成聚合簇的最小个数
			geometries: [
				{ // 点数组
					position: new TMap.LatLng(res.lat, res.lng)
				},
				{ // 点数组
					position: new TMap.LatLng(39.953416, 116.480945)
				},
				{
					position: new TMap.LatLng(39.984104, 116.407503)
				},
				{
					position: new TMap.LatLng(39.908802, 116.497502)
				},
				{
					position: new TMap.LatLng(40.040417, 116.373514)
				},
				{
					position: new TMap.LatLng(39.953416, 116.380945)
				},
				{
					position: new TMap.LatLng(39.984104, 116.307503)
				},
				{
					position: new TMap.LatLng(39.908802, 116.397502)
				}
			],
			zoomOnClick: true, // 点击簇时放大至簇内点分离
			gridSize: 60, // 聚合算法的可聚合距离
			averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
			maxZoom: 10 // 采用聚合策略的最大缩放级别
		});
	}
}

let aList = ref([
	{
		name: "南门入口闸机",
		id: 0,
		img: "../../../static/image/u138.svg"
	},
	{
		name: "东门出口闸机",
		id: 1,
		img: "../../../static/image/u9957.svg"
	},
	{
		name: "3号楼1单元门",
		id: 2,
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E5%BC%80%E9%97%A8/u9960.svg"
	},
	{
		name: "西门出口闸机",
		id: 3,
		img: "../../../static/image/u138.svg"
	}
])
let actionGEIde = (index) => {
	actionGe.value = index
}
let addKai = () => {
	if(actionGe.value !== -1){
		show.value = true
	}else{
		uToastRef.value.show({
			type: 'default',
			title: '默认主题',
			message: "请选择要分享开的门",
		})
	}
	
}

// 创建响应式数据  
const status = ref('loadmore');
// 开门事件
let shadeAdd = () => {
	if (actionGe.value !== -1) {
		status.value = 'loading';
		shade.value = true;
		uni.showLoading({
			title: '正在开门，请稍后',
			mask: true
		});
		setTimeout(() => {
			shade.value = false;
			uni.hideLoading();
			uni.showToast({
				title: '开门成功',
				duration: 1000
			});
		}, 2000);
	} else {
		uToastRef.value.show({
			type: 'default',
			title: '默认主题',
			message: "请选择要开的门",
		})
	}

}
</script>

<style lang="less" scoped>
.wrapperBox-But {
	width: 98%;
	height: 9.25rem;
	background-color: #fff;
	position: fixed;
	bottom: 200rpx;
	z-index: 666;
}

.wrapperBox-item-butop {
	margin-top: 20rpx;
	display: flex;
	text-align: center;
	font-size: 26rpx;

	.wrapperBox-item-ite {
		width: 50%;
	}

	image {
		width: 60rpx;
		height: 60rpx;
	}
}

.wrapperBox-item .wrapperBox-ii:nth-child(2) image {
	width: 63rpx;
}

.wrapperBox-item .wrapperBox-ii:nth-child(3) image {
	width: 63rpx;
}

.action {
	background-color: #b4e5fb !important;
}

.flflfl::after {
	content: "";
	display: block;
	width: 4rpx;
	height: 80rpx;
	background-color: #d7d7d7;
}

.wrapperBox-item {
	display: flex;
	font-size: 24rpx;
	text-align: center;
	padding-bottom: 30rpx;
	border-bottom: #dadada 1rpx solid;

	image {
		width: 80rpx;
		height: 80rpx;
	}

	.wrapperBox-ii {
		width: 25%;
	}
}

.content {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wrapperBox {
	position: relative;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

#wrapper {
	z-index: 20;
	width: 120vw;
	height: 120vh;
	top: -10vh;
	left: -10vw;
	position: absolute;
}


.share-Xia {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
}

.share-top {
	color: #02a7f0 !important;
	background-color: #fff !important;
	width: 69%;
	height: 700rpx;
	padding: 30rpx;
	margin-left: 80rpx;
	margin-top: 100rpx;
}

.share-top-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1697db;
	padding-bottom: 10rpx;
	border-bottom: 1rpx solid #c5c2c2;
}

.hare-top-qrcode-text {
	margin-top: 20rpx;
	color: #c5c2c2;
	text-align: center;
	font-size: 20rpx;
}

.hare-top-qrcode-but {
	margin: 0 auto;
	margin-top: 60rpx;
	border: 1rpx solid #2cb5f2;
	padding: 20rpx 0;
	width: 350rpx;
	text-align: center;
	color: #5b5b5b;
	font-size: 24rpx;

	text {
		font-size: 30rpx;
		font-weight: 600;
		color: #de2239;

	}
}

.hare-top-qrcode {
	display: flex;
	justify-content: center;
	margin-top: 60rpx;
}
</style>
